<template>
  <div style="max-width: 1200px;margin: 0 auto;padding: 20px;
  font-family: 'Microsoft Yahei'">
    <!-- 搜索卡片 -->
    <el-card style="height: 70px;margin: 5px;">
      <el-form :inline="true">
        <el-form-item label="考试搜索" style="width: 270px;">
          <el-input placeholder="请输入考试名称"
                    v-model="searchExam.examName"
                    @keydown.enter="loadExam"></el-input>
        </el-form-item>
        <el-form-item label="考试状态" style="width: 270px;">
          <el-select placeholder="请选择考试状态"
                     v-model="searchExam.status"
                     @change="loadExam">
            <el-option label="所有状态" value=""></el-option>
            <el-option label="待开始" value="0"></el-option>
            <el-option label="进行中" value="1"></el-option>
            <el-option label="已结束" value="2"></el-option>
            <el-option label="已出分" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadExam">查询</el-button>
        </el-form-item>
        <el-button type="primary" style="float:right;" @click="addExam">新建考试</el-button>
      </el-form>
    </el-card>

<!-- 考试页列表   -->
    <el-card style="margin: 10px;">
      <el-table :data="examArr">
        <el-table-column type="index" label="编号" width="60" align="center"></el-table-column>
        <el-table-column prop="examName" label="考试名称" align="center"></el-table-column>
        <el-table-column prop="examDesc" label="考试描述" align="center"></el-table-column>
        <el-table-column label="考试时长" align="center">
          <template #default="scope">{{ scope.row.duration }} 分钟</template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
        <el-table-column prop="passScore" label="通过分数" align="center"></el-table-column>
        <el-table-column prop="totalScore" label="总分数" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <span :style="statusStyle[scope.row.status]">
      {{statusMap[scope.row.status]}}</span></template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="editExam(scope.row.examId)">编辑</el-button>
            <el-button type="danger" link @click="deleteExam(scope.row.examId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

<!--    新增与编辑考试弹窗共用-->
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               style="width: 1000px;padding: 40px;" :before-close="handleClose">
      <el-form label-position="top">
        <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="考试名称">
             <el-input v-model="saveExamForm.examName" placeholder="请输入考试名称"></el-input>
           </el-form-item>
         </el-col>
          <el-col :span="12">
            <el-form-item label="考试描述">
              <el-input v-model="saveExamForm.examDesc" placeholder="请输入考试描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="开始时间">
              <el-date-picker type="datetime" format="YYYY-MM-DD HH:mm" @change="validateDate"
                              value-format="YYYY-MM-DD HH:mm" v-model="saveExamForm.startTime"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间">
              <el-date-picker type="datetime" format="YYYY-MM-DD HH:mm" @change="validateDate"
                              value-format="YYYY-MM-DD HH:mm" v-model="saveExamForm.endTime"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="考试时长(分钟)">
              <el-input v-model="saveExamForm.duration" placeholder="请输入考试时长" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="总分数">
              <el-input v-model="saveExamForm.totalScore" placeholder="请输入考试总分"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通过分数">
              <el-input v-model="saveExamForm.passScore" placeholder="请输入通过分数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveExam">保存</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
//TODO 对于已结束和已出分的考试不允许编辑,但可以重新发起考试
import {onMounted, ref} from 'vue';
import qs from 'qs';
import axios from "axios";
import {ElMessage} from "element-plus";

const searchExam = ref({examName:'',status:''});
const examArr = ref([]);
const loadExam = ()=>{
  let data =qs.stringify(searchExam.value);
  axios.get(BASE_URL+'/v1/exam/select?'+data).then((res)=>{
    if (res.data.code == 200){
      examArr.value = res.data.data;
      console.log(examArr.value);
    }else{
      ElMessage.error(res.data.message);
    }
  })
}
onMounted(()=>{
  loadExam();
})
const resetSearch =()=>{
  searchExam.value = {examName:'',status:''};
  loadExam();
}
const statusMap = ref({
  0: '待开始',
  1: '进行中',
  2: '已结束',
  3: '已出分'
});
const statusStyle = ref({
  0: { color: '#ff7d00' },
  1: { color: '#00b42a' },
  2: { color: '#86909c' },
  3: { color: '#1890ff' }
});
//定义对象保存弹窗表单的数据
const saveExamForm = ref({
  examId:'',
  examName:'',
  examDesc:'',
  duration:'',
  startTime:'',
  endTime:'',
  totalScore:'',
  passScore:'',
  status:''
})
//定义变量保存弹窗标题
const dialogTitle = ref('');
//定义弹窗是否出现
const dialogVisible = ref(false);
//定义新增考试的方法
const addExam = ()=>{
  dialogTitle.value = '新增考试';
  dialogVisible.value = true;
}
//定义编辑考试页面展示数据库数据的方法
const editExam = (examId)=>{
  dialogTitle.value = '编辑考试';
  dialogVisible.value = true;
  axios.get(BASE_URL+'/v1/exam/select?examId='+examId).then((ref)=>{
    if (ref.data.code == 200){
      console.log(ref.data.data);
      saveExamForm.value = ref.data.data[0];
      console.log(saveExamForm.value);
    }else {
      ElMessage.error(ref.data.message)
    }
  })
}
//创建校验开始时间与结束时间先后顺序
const validateDate = ()=>{
  const startTime = saveExamForm.value.startTime;
  const endTime = saveExamForm.value.endTime;
  const currentTime = new Date();
  if (startTime && new Date(startTime) < currentTime) {
    ElMessage.error('考试开始时间不得早于当前时间!');
    saveExamForm.value.startTime = '';
  }
  if (startTime && endTime && new Date(startTime) >= new Date(endTime)){
    ElMessage.error('结束时间不得早于开始时间!');
    saveExamForm.value.endTime = '';
  }else if (startTime && endTime) {
    const timeDif = new Date(endTime) - new Date(startTime);
    const mintes = Math.floor(timeDif / 60 / 1000);
    saveExamForm.value.duration = mintes;
  } else {
    saveExamForm.value.duration = '';
  }
}
//定义途中点击取消或点击弹窗外部导致弹窗关闭的方法
const handleClose = ()=>{
  if (confirm('确定要关闭弹窗吗?内容不会保留')){
    dialogVisible.value = false;
    saveExamForm.value = {}
  }
}
//保存弹窗中的数据
const saveExam =() =>{
  console.log(saveExamForm.value);
  let data = qs.stringify(saveExamForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/exam/save',data).then((res)=>{
    if (res.data.code == 200){
      ElMessage.success('保存成功!');
      dialogVisible.value = false;
      saveExamForm.value = {};
      loadExam();
    }else if(res.data.code == 301){
      ElMessage.error(res.data.data);
    }else {
      ElMessage.error(res.data.message);
    }
  })
}
//定义删除考试的方法
const deleteExam = (examId)=>{
  if (confirm('确定要删除吗?')){
    axios.get(BASE_URL+'/v1/exam/delete?examId='+examId).then((res)=>{
      if (res.data.code == 200){
        ElMessage.success('删除成功!');
        loadExam();
      }else {
        ElMessage.error(res.data.message);
      }
    })
  }
}
</script>
<style scoped>
</style>
